<template>
    <div class="about relative">
        <div style="width: 100%; height: 940px" id="map-container"></div>
        <!-- 联系信息蒙层 -->
        <div class="contact-overlay">
            <div class="contact-info">
                <div class="text-[24px] mb-[10px]">联系我们</div>
                <div class="text-[48px] mb-[40px]" style="line-height: 72px">
                    028-8318626
                </div>
                <div class="flex w-full">
                    <div class="bg-[#589E35] h-[3px] w-[100px]"></div>
                    <div class="bg-[#d8d8d8] h-[1px] w-[100px] flex-1"></div>
                </div>
                <div class="py-[64px]">
                    <div class="flex gap-[24px]">
                        <div
                            class="icon w-[50px] h-[50px] bg-[#efefef] flex items-center justify-center"
                        >
                            <img style="width: 26px" :src="address" alt="" />
                        </div>
                        <div class="mb-[20px]">
                            <div class="text-[16px] text-[#666] mb-[10px]">
                                地址
                            </div>
                            <div class="text-[16px]">
                                成都市金牛区金凤凰大道766号8栋1单元
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-[24px]">
                        <div
                            class="icon w-[50px] h-[50px] bg-[#efefef] flex items-center justify-center"
                        >
                            <img style="width: 26px" :src="email" alt="" />
                        </div>
                        <div>
                            <div class="mb-[20px]">
                                <div class="text-[16px] text-[#666] mb-[10px]">
                                    电子邮件
                                </div>
                                <div class="text-[16px]">bsrs@acehls.com</div>
                            </div>
                        </div>
                    </div>
                </div>
                <a-divider style="background-color: #d8d8d8; margin: 0" />
                <div class="mt-[40px]">
                    <div class="text-[16px] text-[#666] mb-[18px]">
                        媒体平台
                    </div>
                    <div class="flex gap-[16px]">
                        <a-popover
                            v-for="_y in mediaList"
                            :key="_y"
                            placement="bottom"
                        >
                            <template #content>
                                <img :src="_y.code" alt="" />
                            </template>
                            <div
                                class="w-[50px] h-[50px] bg-[#3aa01a] rounded-[4px] flex items-center justify-center"
                            >
                                <img
                                    style="width: 32px"
                                    :src="_y.icon"
                                    alt=""
                                />
                            </div>
                        </a-popover>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import address from '../assets/images/about/address.png'
import email from '../assets/images/about/email.png'

import weixin from '../assets/images/weixin.png'
import douyin from '../assets/images/douyin.png'
import redbook from '../assets/images/redbook.png'
import shipin from '../assets/images/shipin.png'

import weixin_code from '../assets/images/weixin_code.png'
import douyin_code from '../assets/images/douyin_code.png'
import redbook_code from '../assets/images/redbook_code.png'
import shipin_code from '../assets/images/shipin_code.png'

const mediaList = [
    {
        name: '微信',
        icon: weixin,
        code: weixin_code
    },
    {
        name: '抖音',
        icon: douyin,
        code: douyin_code
    },
    {
        name: '小红书',
        icon: redbook,
        code: redbook_code
    },
    {
        name: '视频号',
        icon: shipin,
        code: shipin_code
    }
]

onMounted(() => {
    const AMap = window.AMap // 确保高德地图API已加载

    /**
     * GCJ02(高德/腾讯坐标系)104.0997015380076, 30.76778914910657东经E：104°05′58.93″  北纬N：30°46′4.04″BD09(百度坐标系)104.10630527386665, 30.77348027042553东经E：104°06′22.70″  北纬N：30°46′24.53″
     */
    var map = new AMap.Map('map-container', {
        viewMode: '2D', // 默认使用 2D 模式
        zoom: 16, // 初始化地图层级
        center: [104.0997015380076, 30.76778914910657] // 设置地图中心点为小湾智能的位置
        // 添加标注
    })
    map.on('complete', () => {
        // 创建红色标注
        const marker = new AMap.Marker({
            position: [104.0997015380076, 30.76778914910657], // 标注位置
            title: '艾斯康ACEHEAL', // 标注标题
            icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', // 红色标注图标
            offset: new AMap.Pixel(-13, -30) // 调整图标位置
        })

        // 添加提示信息
        const infoWindow = new AMap.InfoWindow({
            content: '<div">艾斯康ACEHEAL</div>', // 提示内容
            offset: new AMap.Pixel(-3, -35) // 提示框偏移量
        })

        infoWindow.open(map, marker.getPosition())

        marker.setMap(map) // 将标注添加到地图
    })
})
</script>

<style lang="less" scoped>
.about {
    position: relative;
}

.contact-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    pointer-events: none; // 允许点击穿透到地图
}

.contact-info {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 475px;
    height: 676px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 60px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    pointer-events: auto; // 恢复该元素的点击事件
}

#map-container {
    width: 100%;
    height: 940px;
}
</style>
